<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>巷陌发现 - 登录</title>
  <link rel="stylesheet" href="../static/layui/css/layui.css">
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
      background: url('https://images.unsplash.com/photo-1557804506-669a67965ba0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fDE2OTM4NzUyNjV8fHx8&auto=format&fit=crop&w=1470&q=80') no-repeat center center fixed;
      background-size: cover;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

    .login-container {
      width: 400px;
      background-color: rgba(255, 255, 255, 0.9);
      border-radius: 10px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
      padding: 30px;
    }

    .login-title {
      text-align: center;
      font-size: 24px;
      color: #333;
      margin-bottom: 20px;
      position: relative;
    }

    .login-title::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 3px;
      background: linear-gradient(90deg, #ff6b6b, #ffa502, #48dbfb);
    }

    .form-group {
      margin-bottom: 20px;
    }

    .form-group label {
      display: block;
      font-size: 14px;
      color: #555;
      margin-bottom: 8px;
    }

    .form-group input {
      width: 100%;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 5px;
      font-size: 14px;
      transition: border-color 0.3s;
    }

    .form-group input:focus {
      border-color: #6a11cb;
      outline: none;
    }

    .login-btn {
      width: 100%;
      padding: 12px;
      background: linear-gradient(90deg, #6a11cb, #2575fc);
      color: white;
      border: none;
      border-radius: 5px;
      font-size: 16px;
      cursor: pointer;
      transition: background 0.3s;
    }

    .login-btn:hover {
      background: linear-gradient(90deg, #5a0dc8, #1a69e0);
    }

    .other-options {
      text-align: center;
      margin-top: 20px;
    }

    .other-options a {
      color: #6a11cb;
      text-decoration: none;
      margin: 0 10px;
      font-size: 14px;
      transition: color 0.3s;
    }

    .other-options a:hover {
      color: #5a0dc8;
    }

    #username, #password {
      width: 95%;
    }
  </style>
</head>

<body>
<div class="login-container">
  <h2 class="login-title">巷陌发现 - 登录</h2>
  <div class="form-group">
    <label for="username">账号：</label>
    <input type="text" id="username" placeholder="请输入用户名">
  </div>
  <div class="form-group">
    <label for="password">密码：</label>
    <input type="password" id="password" placeholder="请输入密码">
  </div>
  <button class="login-btn" id="loginBtn">确定登录</button>
  <div class="other-options">
    <a href="/register" id="registerLink">注册</a>
    <a href="/forgetPassword" id="forgetPwdLink">忘记密码</a>
    <a href="/phoneLogin" id="phoneLoginLink">手机号登录</a>
  </div>
</div>
<script src="../static/js/jquery.js"></script>
<script src="../static/js/jquery.cookie.js"></script>
<script src="../static/layui/js/layui.js"></script>
<script>
  layui.use(['layer'], function () {
    var layer = layui.layer;

    // 登录按钮点击事件
    $('#loginBtn').click(function () {
      var username = $('#username').val().trim();
      var password = $('#password').val().trim();

      console.log(username)
      console.log(password)
      if (username === ''||username===null) {
        layer.msg('请输入用户名');
        return;
      }

      if (password === ''||password===null) {
        layer.msg('请输入密码');
        return;
      }

      // 这里可以添加登录请求的逻辑，目前只是模拟
      layer.msg('登录中...', { icon: 16, shade: 0.3, time: 1000 }, function () {
        $.ajax({
          url:"/user/login",
          type:"post",
          dataType:"json",
          data:{
            username,
            password
          },
          success:function (res) {
            if(res.code===200){
              layer.msg('登录成功', { icon: 6 }, function () {
                // 登录成功后的操作，比如跳转到首页
                $.cookie("username",username)
                $.cookie("userid",res.data.id)
                window.location.href ='iframeClient';
                //首页没找到，先跳转别的了
              });
            }else {
              layer.msg('登录失败', { icon: 6 }, function () {
              });
            }
          },
          error:function(){
            console.log("用户名：" + username)
            console.log("密码：" + password)
          }
        })
      });
    });

    // 注册链接点击事件
    $('#registerLink').click(function () {
      layer.msg('跳转到注册页面');
      window.location.href = 'register.html';
      // 这里可以添加跳转到注册页面的逻辑
    });

    // 忘记密码链接点击事件
    $('#forgetPwdLink').click(function () {
      layer.msg('跳转到忘记密码页面');
      // 这里可以添加跳转到忘记密码页面的逻辑
      window.location.href = 'forget_password.html';
    });

    // 手机号登录链接点击事件
    $('#phoneLoginLink').click(function () {
      layer.msg('跳转到手机号登录页面');
      // 这里可以添加跳转到手机号登录页面的逻辑
      window.location.href = 'phone_login.html';
    });
  });
</script>
</body>

</html>